<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/table.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/dwz/themes/default/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="${pageContext.request.contextPath}/dwz/themes/css/core.css" rel="stylesheet" type="text/css" media="screen" />
<script src="${pageContext.request.contextPath}/jquery/jquery-2.1.4.min.js"></script>

<table border="0" cellpadding="0" cellspacing="0" class="table_border">
	<tr>
		<td>
			<table width="100%" border="0" cellpadding="0" cellspacing="0"
				class="table_right">
				<tr>
					<td><font style="font-size: 12px;"><strong>为用户分配角色</strong></font>
					</td>
					<td width="25" height="26" align="left"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			<table width="100%" border="0" cellspacing="0" class="table_padding">
				<tr>
					<td>
						<table style="font-size:12px;" width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td width="42%">
									<div class="list_tit">${user.name}，未分配角色列表</div>
								</td>
								<td width="15%">&nbsp;</td>
								<td width="43%">
									<div class="list_tit">${user.name}，已分配角色列表</div>
								</td>
							</tr>
							<tr>
								<td><select size="20" name="srcList" id="srcList"
									style="width: 100%; font-size: 12px;" multiple="multiple">
										<c:forEach items="${assign.desRole}" var="role">
											<option value="${role.id}">${role.name}</option>
										</c:forEach>
								</select></td>
								<td>
									<p align="center">
										<img style="cursor:pointer;" onmouseout="this.width=30;this.height=30;"
                                             onmouseover="this.width=35;this.height=35;"
                                             width="30px;" height="30px;" alt="分配角色"
                                             src="${pageContext.request.contextPath}/images/youjt.png" title="分配角色" onclick="assign()">
									</p>
									<br><br><br><br>
									<p align="center">
										<img style="cursor:pointer;" onmouseout="this.width=30;this.height=30;" 
											onmouseover="this.width=35;this.height=35;" 
											width="30px;" height="30px;" width="30px;" 
											height="30px;" alt="撤销角色" src="${pageContext.request.contextPath}/images/zuojt.png"
											title="撤销角色" onclick="disAssign()">
									</p>
								</td>
								<td><select name="destList" size="20" multiple="multiple"
									id="destList" style="width: 100%; font-size: 12px;">
									<c:forEach items="${assign.hasRole}" var="role">
										<option value="${role.id}">${role.name}</option>
									</c:forEach>
								</select></td>
							</tr>
						</table>
						<table width="100%" border="0" cellpadding="0" cellspacing="0"
							class="table_padding">
							<tr>
								<td height="21" align="right">
									<table align="right">
										<tr>
											<td>
												<span id="msg" class="star"></span>
											</td>
											<td>
												<a class="button" href="javascript:void(0);" onclick="save()"><span>保存</span></a>
											</td>
											<td width="50px">
												<a class="button" href="javascript:void(window.history.back());"><span>返回</span></a>
											</td>

										</tr>

									</table>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
<script>
	/**
	 * 分配角色
	 */
	function assign() {
		let selected = $("#srcList option:selected");
		$("#destList").append(selected);
		$("#srcList option").remove(selected)
	}

	/**
	 *撤销角色
	 */
	function disAssign() {
		let selected = $("#destList option:selected");
		$("#srcList").append(selected);
		$("#destList option").remove(selected)
	}
	function save() {
		let destList = $("#destList option");
		let array =[]
		for (let i=0;i<destList.length;i++){
			array.push(destList[i].value)
		}
		$.post("user?method=saveAssign",{"array[]":array,"id":"${userId}"},result=>{
			$("#msg").text(result.message);
		},"json")
	}
</script>